Move CSS reset, font loading and theme switch outside React to prevent flicker #494

Danziger · 2024-10-15T08:24:52Z

Add different icons for development (plasmo does that automatically but we were overriding that from JS).
Move CSS reset and font definitions to a CSS file to remove font loading flicker.
Unify theme logic into a single provider and persist background color in localStorage to remove theme flicker.

Danziger · 2024-10-15T10:55:07Z

src/components/popup/Route.tsx

@@ -26,10 +26,9 @@ export const Wrapper = styled(motion.div)<{
 expanded?: boolean;
 }>`
 position: relative;
- width: ${(props) => (props.responsive ? "100%" : "377.5px")};


This .5 seem to fix some rendering issues (underflow) in some cases but cause another issue (overflow) in some other cases. I'd just leave it as 377px which is the actual value this should have everywhere and fix it later by laying out the components differently.

Danziger · 2024-10-15T10:55:52Z

src/components/popup/Route.tsx

 min-height: ${(props) => (props.expanded ? "100vh" : "600px")};
 max-height: max-content;
- background-color: rgb(${(props) => props.theme.background});


The background is set on the body by the ThemeProvider in the components library, so no need to set it again here.

Danziger · 2024-10-15T10:56:30Z

src/popup.tsx

- </ExpandedViewWrapper>
- </HardwareWalletTheme>
- </Provider>
+ <ArConnectThemeProvider>


ArConnectThemeProvider replaces Provider + HardwareWalletTheme and used the useTheme hook internally.

Danziger · 2024-10-15T10:58:29Z

src/routes/popup/transaction/[id].tsx

@@ -356,7 +372,50 @@ export default function Transaction({ id: rawId, gw, message }: Props) {
 {browser.i18n.getMessage("transaction_from")}
 </PropertyName>
 <PropertyValue>
- {formatAddress(transaction.owner.address, 6)}
+ <div>


Eventually, it would be better to turn this into a bunch of individual components.

In any case, the reason for this change is that before the UI would only prompt users to add the "to" address as contact. After this change, it would prompt for both "to" and "from", and it would also take into account if an address is yours and display "(you)" next to it.

- Stop using Route for the Unlock view. - Make initial fade-in faster.

Danziger · 2024-10-17T10:29:33Z

src/components/SliderMenu.tsx

 isOpen: boolean;
 onClose?: () => void;
 children?: React.ReactNode;
 }

 export default function SliderMenu({
 title,
+ hasNav,


In the Send view, the last option inside the menus was covered by the bottom navigation.

…d on browser preferences.

Danziger · 2024-10-17T10:39:03Z

src/components/hardware/HardwareWalletTheme.tsx

+ const themeModifier = hardwareApi ? hardwareThemeModifier : noThemeModifier;
+
+ useEffect(() => {
+ const reducedMotionPreference = window.matchMedia(


Added this here. It could eventually be added in settings too, just like the system theme can be overridden.

Danziger · 2024-10-17T10:39:57Z

src/components/popup/HeadV2.tsx

- >
- <BackButtonIcon />
- </BackButton>
+ {showBack ? (


The conditional was missing here, so that option did nothing.

Danziger · 2024-10-17T10:41:47Z

src/components/popup/HeadV2.tsx

- </AnimatePresence>
- </ButtonAvatar>
- </AvatarButton>
+ {showOptions ? (


This other one was probably implemented incorrectly and allowOpen (now removed) and showOptions were redundant but not implemented properly. No, the lock screen should only show the title at the top, no back button or wallet selector.

Danziger · 2024-10-17T10:42:37Z

src/components/popup/HistoryProvider.tsx

@@ -27,18 +26,6 @@ export default function HistoryProvider({ children }: PropsWithChildren<{}>) {
 history.back();
 };

- // redirect to unlock if decryiption
- // key is not available
- useEffect(() => {


Logic moved to useSetUp() in ArConnect/src/wallets/index.ts.

Danziger · 2024-10-17T10:44:33Z

src/components/popup/Route.tsx

@@ -14,32 +14,18 @@ const Route: typeof BaseRoute = ({ path, component, children }) => {
 ? children(params)
 : children;

- return (
- <AnimatePresence initial={false}>


Added a single AnimatePresence in popup.tsx.

Danziger · 2024-10-17T10:46:07Z

src/components/popup/Route.tsx

- background-color: rgb(${(props) => props.theme.background});
-`;
-
-const PageWrapper = styled(Wrapper)`


There were some unnecessary containers (HTML) that is now gone, so the HTML structure should look much simpler:

body > #__plasmo > main#Page

Danziger · 2024-10-17T10:47:08Z

src/components/popup/WalletHeader.tsx

@@ -242,18 +234,23 @@ export default function WalletHeader() {
 }
 }
 ];
- if (!isExpanded && items.length === 4) {
+
+ if (location.pathname === "/popup.html") {


The full screen version is now loaded from a different HTML file: fullscreen.html, so all these checks are now much simpler and the styling changes require no JS.

Danziger · 2024-10-17T10:48:17Z

src/components/popup/home/Balance.tsx

- // lock wallet and terminate session
- async function lockWallet() {
- await removeDecryptionKey();
- push("/unlock");


No need for a route change anymore. Removing the decryption key makes the root re-render automatically, showing the Unlock screen.

Danziger · 2024-10-17T10:49:57Z

src/popup.tsx

-
- // init popup
- useSetUp();
+ const initialScreenType = useSetUp();


The route guarding logic now lives here and doesn't rely on routes to work. That applies to the Unlock screen and an "undefined" state when the app first loads. This will also include a state and UI for the "creating wallet" state of the embedded wallet.

Danziger · 2024-10-17T10:50:13Z

src/popup.tsx

- display: none
- }
+ if (initialScreenType === "cover") {
+ content = <Page />;


Empty page. Does nothing but wait.

Danziger · 2024-10-17T10:50:43Z

src/popup.tsx

+ // This can only happen in the embedded wallet:
+ content = (
+ <Page>
+ <p>Generating Wallet...</p>


Placeholder for the embedded wallet. This does nothing right now, but I'll update it in the other PR once this one is merged.

7i7o

tACK 👍

Danziger added 3 commits October 10, 2024 19:10

Add different logos when using the extension in development.

09f073d

Move CSS reset outside React.

2f796ce

Merge development and resolve conflicts.

5a4bf78

Danziger marked this pull request as draft October 15, 2024 08:24

Danziger changed the base branch from production to development October 15, 2024 08:25

Fix theme flicker.

5b87679

Danziger commented Oct 15, 2024

View reviewed changes

Danziger marked this pull request as ready for review October 15, 2024 10:59

Danziger added 4 commits October 16, 2024 15:25

Remove comments.

3ecfe8c

- Remove unnecessary markup.

9d56e9c

- Stop using Route for the Unlock view. - Make initial fade-in faster.

Remove expanded URL param for the expanded popup view.

11c1d05

Implement the expanded mode with another HTML file and just CSS (no JS).

9b44947

Danziger commented Oct 17, 2024

View reviewed changes

Implement reduced motion (no framer animations/transitions) mode base…

ef5c981

…d on browser preferences.

Danziger commented Oct 17, 2024

View reviewed changes

Danziger added 2 commits October 17, 2024 13:07

Speed up cover removal.

739d547

Add .editorcofig, .env.example and remove console.log().

7ef6198

7i7o approved these changes Oct 17, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move CSS reset, font loading and theme switch outside React to prevent flicker #494

Move CSS reset, font loading and theme switch outside React to prevent flicker #494

Danziger commented Oct 15, 2024 •

edited

Loading

Danziger Oct 15, 2024

Danziger Oct 15, 2024

Danziger Oct 15, 2024

Danziger Oct 15, 2024

Danziger Oct 17, 2024

Danziger Oct 17, 2024

Danziger Oct 17, 2024

Danziger Oct 17, 2024

Danziger Oct 17, 2024

Danziger Oct 17, 2024

Danziger Oct 17, 2024

Danziger Oct 17, 2024

Danziger Oct 17, 2024

Danziger Oct 17, 2024

Danziger Oct 17, 2024

Danziger Oct 17, 2024

7i7o left a comment

Move CSS reset, font loading and theme switch outside React to prevent flicker #494

Are you sure you want to change the base?

Move CSS reset, font loading and theme switch outside React to prevent flicker #494

Conversation

Danziger commented Oct 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

7i7o left a comment

Choose a reason for hiding this comment

Danziger commented Oct 15, 2024 •

edited

Loading